<template>
  <div class="Serve" >
    <scroll-view class="serve_main" scroll-y="true" show-scrollbar @scroll="scrollH" :scroll-top="scrollTop" scroll-with-animation="true">
      <div  v-for="(item, index) in messageList" :key="index">
          <!-- 客服信息 -->
        
          <div class="other_user" v-if="item.user=='other'">
            <div class="time">{{item.time }}</div>
            <div class="user_main">
              <div class="avatar_warp">
                  <image :src="item.avatar"></image>
              </div>
              <div class="triangle_left"></div>
              <div class="user_message">
                  <view class="user_message_con" v-if="item.type==1"> {{item.con}} </view>
				  <image :src="item.img" v-if="item.img" style="width: 200rpx;height: 200rpx;background-size: 100% 100%;margin-top: 20rpx;" :show-menu-by-longpress="true"></image>
                  <view class="user_message_tip" v-if="item.type==2">猜你想问</view>
                  <view class="user_message_list" v-if="item.type==2">
                    <view  class="user_message_li"  v-for="(i, k) in item.replyContent" :key="k">
                      <view class="user_message_li_q" @click="getQuestion(i)">{{ i.keywordName }}</view>
                    </view>
                  </view>
                 
              </div>
            </div>
          </div>
          <!-- 我的信息 -->
          <div class="other_user me" v-else>
            <div class="time">{{item.time }}</div>
            <div class="user_main">
              
              
              <div class="user_message">
                <view class="user_message_con">{{item.con}}</view>
              </div>
              <div class="triangle_left"></div>
              <div class="avatar_warp">
                  <image :src="item.avatar"></image>
              </div>
            </div>
          </div>
      </div>
    </scroll-view>
    
    
    <div class="inp_warp">
      <input class="inp_warp_input" type="text"  v-model="sendVal" placeholder="请输入内容..." @confirm="send"/>
       <text class="inp_warp_btn" @click="send">发送</text>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
        scrollTop:0,
        // 信息体
        messageList: [],
        // 输入框
        sendVal: "",
    };
  },
  created() {
    this.initMessage();
  },
  methods: {
    scrollH(e){
         console.log(e); 
    },
    getNowTime(){
          //时间戳
          const Dates = new Date();
          //年份
          const Year = Dates.getFullYear();
          //星期
          const data = Dates.getDay();
          //月份下标是0-11
          const Months =Dates.getMonth() + 1 < 10
              ? "0" + (Dates.getMonth() + 1)
              : Dates.getMonth() + 1;
          //具体的天数
          const Day = Dates.getDate() < 10 ? "0" + Dates.getDate() : Dates.getDate();
          //小时
          const Hours =
            Dates.getHours() < 10 ? "0" + Dates.getHours() : Dates.getHours();
          //分钟
          const Minutes =
            Dates.getMinutes() < 10 ? "0" + Dates.getMinutes() : Dates.getMinutes();
          //秒
          const Seconds =
            Dates.getSeconds() < 10 ? "0" + Dates.getSeconds() : Dates.getSeconds();
          return `${Year}年${Months}月${Day}日  ${Hours}:${Minutes}:${Seconds}`;
    },
    initMessage() {
		var adminPhoneNumber=uni.getStorageSync('configData').adminPhoneNumber;
		var adminWxQrcode=uni.getStorageSync('configData').adminWxQrcode;
      var other = {
        avatar: "https://bucket-ans.oss-cn-hangzhou.aliyuncs.com/2.jpg",
        time: this.getNowTime(),
        con: "您好，欢迎来到客服中心，您的专属客服小艾为您服务，如有疑问请致电官方："+adminPhoneNumber+"，小艾可能还不够聪明，如果有什么冒犯的地方请您理解！",
        user: "other",  
        type:1,
      };
      this.messageList.push(other);
	  var other2 = {
	    avatar: "https://bucket-ans.oss-cn-hangzhou.aliyuncs.com/2.jpg",
	    time: this.getNowTime(),
	    con: "您可以扫描下方二维码添加管理员微信",
		img:this.$prefix(adminWxQrcode),
	    user: "other",  
	    type:1,
	  };
	  this.messageList.push(other2);
    },
    resetSorollBar() {
        let that=this;
        const element = uni.createSelectorQuery().select('.serve_main').boundingClientRect()
        element.exec(function(res) {
          console.log("dom元素",res[0].height);
          uni.pageScrollTo({
          	scrollTop: res[0].height+200,
          	duration: 1000
          });
        })
    },
    // 发送消息
    send() {
      if (this.sendVal == "") {
          uni.showToast({
              title:'内容不能为空',
              icon:'none',
          })
          return false;
      }
      var item = {
        avatar: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
        time: this.getNowTime(),
        con: this.sendVal,
        user: "me",
      };
      this.messageList.push(item);
      let that=this;
      this.$nextTick(() => {
        that.resetSorollBar();
      });
      this.sendVal = "";
      var other = {
        avatar: "https://bucket-ans.oss-cn-hangzhou.aliyuncs.com/2.jpg",
        time: this.getNowTime(),
        con: "很抱歉，我没听懂您在说什么",
        user: "other",
        type:1,
      };
      var other2 = {
        avatar: "https://bucket-ans.oss-cn-hangzhou.aliyuncs.com/2.jpg",
        time: this.getNowTime(),
        user: "other",
        type:2,
        replyContent:[
           {
               keywordName:'邀请好友',
               id:1,
               url:'/pages/invite/friend',
           },
           {
               keywordName:'提现',
               id:2,
               url:'/pages/main/withdrawal',
           },
           {
               keywordName:'续费会员',
               id:3,
               url:'/pages/main/buyVip',
           },
           
        ],
      
      };
      setTimeout(() => {
        that.messageList.push(other);
         setTimeout(() => {
             that.messageList.push(other2);
             that.$nextTick(() => {
               that.resetSorollBar();
             });
         },1000)
      }, 2000);
    },
    getQuestion(item){
    //     var item = {
    //       avatar: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
    //       time: this.getNowTime(),
    //       con: item.keywordName,
    //       user: "me",
    //     };
    //     this.messageList.push(item);
    //     let that=this;
    //     this.$nextTick(() => {
    //       that.resetSorollBar();
		  
    //     });
		uni.navigateTo({
			url:item.url,
		})
		
    },
    
  },
};
</script>

<style scoped lang="less">

.serve_main {
  width: 100vw;
  overflow: auto;
  box-sizing: border-box;
  padding: 20rpx;
  margin-bottom: 140rpx;
  background: #fff;
  .other_user{
       padding-bottom: 20rpx;
       .time {
         text-align: center;
         color: #000;
         padding-bottom: 20rpx;
         font-size: 26rpx;
       }
       .user_main {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;
         .avatar_warp{
             width: 80rpx;
             height: 80rpx;
             border-radius: 50%;
             overflow: hidden;
             image{
                 width: 100%;
                 height: 100%;
                 background-size: 100%;
             }
         }
         .user_message {
           padding: 20rpx;
           border-radius: 10rpx;
           background:#ff7747;
           max-width: 60%;
           overflow: hidden;
           
           .user_message_con{
               color: #fff;
               font-size: 26rpx;
               line-height: 34rpx;
               word-wrap: break-word;
               word-break: break-all;
           }
           .user_message_tip{
               color: #fff;
               font-size: 29rpx;
               line-height: 34rpx;
               height: 34rpx;
               padding: 10rpx 0;
               border-bottom: 1rpx #ffffff40 solid;
               width: 300rpx;
           }
           .user_message_list{
               .user_message_li{
                   .user_message_li_q{
                       color: #fff;
                       font-size: 26rpx;
                       line-height: 34rpx;
                       height: 34rpx;
                        padding: 10rpx 0;
                   }
               }
           }
         }
         .triangle_left {
           width: 0;
           height: 0;
           border-top: 16rpx solid transparent;
           margin-left: 20rpx;
           border-right: 20rpx solid #ff7747;
           border-bottom: 16rpx solid transparent;
         }
         
       }
  }
  .me{
     .user_main{
         justify-content: flex-end;
         .user_message{
             background: mediumseagreen;
         }
         .triangle_left{
              margin-left: 0;
              margin-right: 20rpx;
              border-left: 20rpx solid mediumseagreen;
              border-right: 0;
         }
     } 
  }
  
}
.serve_main ::-webkit-scrollbar {
    display: none;
}

.inp_warp {
  box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 20rpx 20rpx 50rpx;
  width: 100%;
  background: #f8f8f8;
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .inp_warp_input{
      border: none;
      background-color: #fff;
      border-radius: 50rpx;
      height: 70rpx;
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 0 20rpx;
      font-size: 26rpx;
      color: #333;
  }
  .inp_warp_btn{
      border: none;
      background-color: #ff7747;
      border-radius: 50rpx;
      height: 70rpx;
      width:120rpx;
      color: #fff;
      font-size: 26rpx;
      margin-left: 20rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
  }
}



</style>

